<template>
    <div class="searchs">
        <!-- <h3>搜索</h3> -->
        <div class="search-top">
            <input @keydown.enter="getInputValue" v-model="text" type="text" placeholder="请输入关键字">
            <button @click="getInputValue">搜索</button>
        </div>
        <div v-if="isLoading">
            <!-- 使用loading组件 -->
            <my-loading></my-loading>
        </div>
        <div v-else>
            <!-- 搜索反馈 -->
            <van-empty v-if="arr.length == 0" description="暂无搜索列表" />
            <!-- 搜索列表 -->
            <ul v-else>
                <li v-for="(item) in arr">
                    <router-link :to="{ path: '/detail', query: { id: item.categoryId } }">
                        <div class="photo">
                            <img :src="item.coverImage" alt="">
                        </div>
                        <div class="left">
                            <h5>《{{ item.title }}》</h5>
                            <p>{{ item.author }}</p>
                            <div v-if="item.author">
                                <!-- <i></i> -->
                                <span v-for="(opt, i) in item.author" :Key="i">{{ opt?.name }} </span>
                            </div>
                        </div>
                        <div class="right">
                            <button>
                                <van-icon size="40px" color="#FA6205" name="play-circle-o" />
                            </button>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>

    </div>
</template>
<script>
// 导入组件
import { Toast } from 'vant';

// 导入自定义组件
import MyLoading from '../components/MyLoading.vue';

// 导入接口
import { search } from '../api/index'

let name;

export default {
    // 注册组件
    components: {
        MyLoading
    },

    data() {
        return {
            arr: [],
            text: "", // 记录输入框的值,
            isLoading: false,
        }
    },

    methods: {
        // 自定义方法
        async searchSong(value) {
            // console.log({keywords: value})

            // 请求之前 显示loading
            this.isLoading = true;

            // 调用搜索接口
            await search({ key: value })
                .then(
                    content => {
                        console.log("请求成功:", content)
                        // 解构赋值
                        let code = content.code;
                        let books = content.data.books;

                        // 判断数据是否为目标数据
                        if (code === 0) {
                            books.map(item => {
                                let obj = {};
                                obj.title = item.title;
                                obj.coverImage = item.coverImage;
                                obj.categoryId = item.categoryId;
                                obj.author = item.author;
                                return obj;

                            })

                            // 赋值
                            this.arr = books;
                        }

                        //   重置输入框
                        this.text = "";
                    }
                )
                .catch(
                    err => {
                        console.log("请求失败:", err)
                    }
                )

            // 请求之后
            setTimeout(() => {
                // 隐藏loading
                this.isLoading = false;
            }, 500);
        },

        // 获取输入框输入的值
        getInputValue() {
            // 获取输入框的值
            let text = this.text;
            // 判断输入框是否为空
            if (text == "" || text.length == 0) {
                Toast("请输入关键字");
                return false;
            }

            // 检查代码是否执行到此处
            // console.log({text});

            // 搜素歌曲
            this.searchSong(text);
        }
    },

    // 侦听器
    watch: {
        // 侦听路由变化
        $route: {
            immediate: true,
            handler($route) {
                // 获取路由名称
                name = this.$route.name;
                //console.log("路由名称2:",name)
            }
        }
    },

    // 触摸行为（手指向右滑动 返回上一页）
    mounted() {
        // 获取路由名称
        name = this.$route.name;
        console.log("路由名称1:", name)
        if (document) {
            // 定义X坐标
            let sx = 0;
            let mx = 0;
            // 记录水平滑动的距离
            let dx = 0;

            // 监听用户的滑动行为
            document.addEventListener('touchstart', event => {
                //获取手指在页面按下的X坐标
                if (name == "search") {
                    sx = event.touches[0].pageX;
                }
            })

            document.addEventListener('touchmove', event => {
                // 手指在页面滑动的X坐标
                if (name == "search") {
                    mx = event.touches[0].pageX;
                }
            })

            document.addEventListener('touchend', event => {
                // 计算手指滑动的距离
                dx = mx - sx;
                //console.log({dx});// 根据dx的正负数判断用户滑动的方向
                // 向右滑动超过100px 返回首页
                if (dx > 100 && name == "search") {
                    // 跳转首页
                    this.$router.push({ path: '/index' })
                }
            })

        }
    }
}
</script>
<style lang="less" scoped>
@import '../assets/css/varible.less';

.searchs {
    padding: @pad;
    box-sizing: border-box;

    .search-top {
        width: 100%;
        display: flex;
        padding: 10px 0;

        input[type='text'] {
            border: 1px solid @borderColor;
            height: 40px;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            padding-left: 15px;
            box-sizing: border-box;
            font-size: 16px;
            width: calc(100% - 60px);
            font-family: Arial, Helvetica, sans-serif;
        }

        input[type='text']::placeholder {
            color: @activeColor;
        }

        button {
            background-color: @bgColor;
            color: #ffffff;
            width: 60px;
            height: 40px;
            font-size: 16px;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            font-family: Arial, Helvetica, sans-serif;
        }
    }

    ul {
        padding: 0 15px;

        li {

            a {
                display: flex;
                width: 100%;
                justify-content: space-between;
                align-items: center;
                font-family: Arial, Helvetica, sans-serif;
                padding: 10px 0px;
                border-bottom: 1px solid #f0f0f0;

                .photo {
                    img {
                        width: 80px;
                        height: 90px;
                        border-radius: 5px;
                    }
                }

                .left {
                 
                    h5 {
                        font-weight: normal;
                        font-size: 18px;
                        line-height: 175%;
                    }

                    p {
                        font-family: a;
                        font-size: 15px;
                        font-weight: bold;
                        padding-left: 15px;
                        padding-top: 10px;
                    }

                    div {
                        font-size: 13px;
                        color: #666;

                        i {
                            display: inline-block;
                            width: 12px;
                            height: 8px;
                            margin-right: 4px;
                            background-image: url(../assets/img/play.png);
                            background-size: 166px 97px;
                        }
                    }
                }

                .right {
                    button {
                        background-color: transparent;
                        color: #ccc;
                    }
                }
            }
        }
    }
}
</style>